<template>

    <a-form ref="formRef" name="custom-validation" :model="formState" v-bind="layout" @finish="handleFinish">
        <a-row>
            <a-col :span="4">
                <a-form-item has-feedback label="部门名称" name="dept_name">
                    <a-input allowClear v-model:value="formState.dept_name" />
                </a-form-item>
            </a-col>

            <a-col :span="4">
                <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
                    <a-button type="primary" html-type="submit">查询</a-button>
                </a-form-item>
            </a-col>
        </a-row>

        <a-row>
            <a-col :span="24">
                <a-flex justify="flex-end">
                    <a-button type="primary" style="margin-left: 10px" @click="handleAdd">新增</a-button>
                </a-flex>
            </a-col>
        </a-row>
    </a-form>


    <a-row>
        <a-col :span="24">
            <a-table size="small" style="width: 100%;" :columns="columns" :data-source="data">
                <template #bodyCell="{ column, text, record }">
                    <template v-if="column.dataIndex === 'action'">
                        <a-space>
                            <a @click="handleEdit(record)">编辑</a>
                            <a @click="handleDelete(record)">删除</a>
                        </a-space>
                    </template>
                </template>
            </a-table>
        </a-col>
    </a-row>

    <a-row>
        <a-drawer v-model:open="open" class="custom-class" root-class-name="root-class-name" style="color: red"
            :title="addFormState.dept_id ? '编辑' : '新增'" placement="right">
            <a-form :rules="addRulesForm" ref="addFormRef" name="custom-validation" :model="addFormState"
                v-bind="layout" @finish="addFormState.dept_id ? handleEditFinish($event) : handleAddFinish($event)">

                <a-form-item has-feedback label="部门名称" name="dept_name">
                    <a-input v-model:value="addFormState.dept_name" />
                </a-form-item>


                <a-form-item has-feedback>
                    <a-col :span="24">
                        <a-flex justify="flex-end">
                            <a-button type="primary" style="margin-left: 10px" html-type="submit">保存</a-button>
                        </a-flex>
                    </a-col>
                </a-form-item>
            </a-form>
        </a-drawer>
    </a-row>
</template>
<script setup>
import { department as service } from '@/api/modulesApi/department';
import { reactive, ref } from 'vue';
import { message, Modal } from 'ant-design-vue';
const columns = [
    {
        title: '部门编号',
        dataIndex: 'dept_id',
        key: 'dept_id',
    },
    {
        title: '部门名称',
        dataIndex: 'dept_name',
        key: 'dept_name',
    },
    {
        title: '创建时间',
        dataIndex: 'create_time',
        key: 'create_time',
    },

    {
        title: '操作',
        dataIndex: 'action',
        key: 'action',
    },

];
const data = ref([]);
const formRef = ref();

const formState = reactive({
    dept_name: '',
});

const open = ref(false);

const addFormState = reactive({
    dept_name: '',
});
const addFormRef = ref();

const addRulesForm = {
    dept_name: [{ required: true, message: '请输入部门名称' }],
};

const handleAdd = () => {
    addFormState.dept_name = '';
    addFormState.dept_id = '';
    open.value = true;
};

const layout = {
    labelCol: { span: 7 },
    wrapperCol: { span: 14 },
};

const getDepartment = async () => {
    try {
        const res = await service.getDepartment(formState)
        data.value = res.data || []
    } catch (error) {
        console.error('获取部门列表失败:', error)
        data.value = []
    }
}
getDepartment()

const handleAddFinish = async (values) => {
    try {
        await service.addDepartment(values)
        message.success('新增成功')
        getDepartment()
        addFormRef.value.resetFields();
        open.value = false;
    } catch (error) {
        console.error('新增失败:', error)
    }
};

const handleFinish = (values) => {
    getDepartment()
};

const handleEditFinish = async (values) => {
    await service.updateDepartment({
        dept_id: addFormState.dept_id,
        dept_name: values.dept_name
    })
    message.success('编辑成功')
    getDepartment()
    addFormRef.value.resetFields();
    open.value = false;
}

const handleEdit = (record) => {
    addFormState.dept_name = record.dept_name;
    addFormState.dept_id = record.dept_id;
    open.value = true;
}

const handleDelete = async (record) => {
    Modal.confirm({
        title: '确认删除',
        content: `确定要删除部门 "${record.dept_name}" 吗？`,
        okText: '确定',
        cancelText: '取消',
        onOk: async () => {
            try {
                const res = await service.deleteDepartment({ dept_id: record.dept_id })
                if (res.code === 200) {
                    message.success('删除成功')
                    getDepartment()
                }
            } catch (error) {
                console.error('删除失败:', error)
            }
        }
    })
}
</script>